(function(doc) {
        var oItems = document.getElementsByClassName('list-item'),
            oList = document.getElementsByClassName('list')[0],
            curIdex = 0;
        var init = function() {
            bindEvent();
        }

        function bindEvent() {
            addEvent(oList, 'mouseover', slide);

            function slide(e) {
                var e = e || window.eventm,
                    tar = e.target || e.srcElement,
                    oParent = getParent(tar, 'li'),
                    thisIdx = Array.prototype.indexOf.call(oItems, oParent);
                if (curIdex !== thisIdx) {
                    oItems[curIdex].className = 'list-item';
                    curIdex = thisIdx;
                    oItems[curIdex].className += ' active'
                }
            }

            function getParent(target, element) {
                while (target.tagName.toLowerCase() !== element) {
                    target = target.parentNode;
                }
                return target
            }
            //     console.log(curIdex);
            //     for (var i = 0; i < oItems.length; i++) {
            //         addEvent(oItems[i], 'mouseover', function(e) {
            //             console.log(oItems);
            //             console.log(curIdex);
            //             console.log(oItems[curIdex]);
            //             console.log(this);
            //             oItems[curIdex].className = 'list-item';

            //             curIdex = Array.prototype.indexOf.call(oItems, this);
            //             oItems[curIdex].className += ' active';
            //         })
            //     }
            // }
            init();
        })(document)